/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput
} from 'react-native';

export default class AwesomeProject extends Component {
  constructor(props){
    super(props);
    this.state={text:''};
  }
  render() {
    let pic={uri: 'http://bmob-cdn-9229.b0.upaiyun.com/2017/02/22/ac57e5b1403aadc4808de77b47b638a5.jpg'}
    return (
        <View style={styles.container}>
          <Image source={pic} style={styles.imageStyle}/>
          <Text style={styles.welcome}>
            hello world
          </Text>
          <TextInput
            style={{height:40,width:100}}
            placeholder={"请输入文字"}
            onChangeText={(text)=>this.setState({text})}
            />
          <Text style={{padding: 10, fontSize: 42}}>
              {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
          </Text>
          <Text style={styles.instructions}>
            Double tap R on your keyboard to reload,{'\n'}
            Shake or press menu button for dev menu,hello
          </Text>
          <Text1 name='Text1' style={styles.welcome}/>
          <Blink text='hello world'/>
        </View>
    );
  }
}

//自定义组件，将name作为一个属性来定制，这样可以复用这一组件来制作各种不同的“问候语”
class Text1 extends Component{
  render(){
    return(
      <Text> hello {this.props.name}!</Text>
    );
  }
}


//文字的显示或隐藏的状态（快速的显隐切换就产生了闪烁的效果）则是随着时间变化的，因此这一状态应该写到state中。
class Blink extends Component{
  constructor(props){
    super(props)
      this.state={
      showText:true
    };

    // 每1000毫秒对showText状态做一次取反操作
      setInterval(
          ()=>{this.setState({showText: !this.state.showText});
          },1000);
  }
  render(){
    // 根据当前showText的值决定是否显示text内容
      let display=this.state.showText?this.props.text:'';
      return(
          <Text>{display}</Text>
      );
  }
}

// 使用StyleSheet.create来集中定义组件的样式
// React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。width.height
// 使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。
// Flexbox布局很像Android开发中的LinearLayout布局
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
    welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  imageStyle:{
    width:193,
    height:110
  }
});
//

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
